(function () {
    var myChart = echarts.init($('#chart7')[0], chartTheme);
    myChart.showLoading();

    $.get('/data/life-expectancy.json', function (data) {
        myChart.hideLoading();
            
        var itemStyle = {
            normal: {
                opacity: 0.8,
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
                label:{
                    show:true,
                    formatter:function(params){
                        console.log("formatter: params.value[3] = "+params.value[3]);
                        return params.value[3];
                    },
                    textStyle: {
                        fontSize: 13
                    }
                }
            }
        };
        
        //气泡大小
        var sizeFunction = function (x) {
            var y = Math.sqrt(x / 5e8) + 0.1;
            return y * 50;
        };
        // Schema:
        var schema = [
            {name: 'Income', index: 0, text: '人均收入', unit: '美元'},
            {name: 'LifeExpectancy', index: 1, text: '人均寿命', unit: '岁'},
            {name: 'Population', index: 2, text: '总人口', unit: ''},
            {name: 'Country', index: 3, text: '国家', unit: ''}
        ];
        option = {
            baseOption: {
                timeline: {
                    axisType: 'category',
                    orient: 'vertical',
                    autoPlay: true,
                    inverse: true,
                    playInterval: 1000,
                    left: null,
                    right: 0,
                    top: 20,
                    bottom: 20,
                    width: 55,
                    height: null,
                    label: {
                        normal: {
                            textStyle: {
                                color: '#fff'
                            }
                        },
                        emphasis: {
                            textStyle: {
                                color: '#fff'
                            }
                        }
                    },
                    symbol: 'none',
                    lineStyle: {
                        color: '#fff'
                    },
                    checkpointStyle: {
                        color: '#bbb',
                        borderColor: '#777',
                        borderWidth: 2
                    },
                    controlStyle: {
                        showNextBtn: false,
                        showPrevBtn: false,
                        normal: {
                            color: '#fff',
                            borderColor: '#fff'
                        },
                        emphasis: {
                            color: '#fff',
                            borderColor: '#fff'
                        }
                    },
                    data: []
                },
                backgroundColor: '#08121c',
                title: {
                    'text': data.timeline[0],
                    textAlign: 'center',
                    left: '68%',
                    top: '58%',
                    textStyle: {
                        fontSize: 100,
                        color: 'rgba(255, 255, 255, 0.7)'
                    }
                },
                tooltip: {
                    padding: 5,
                    backgroundColor: '#222',
                    borderColor: '#777',
                    borderWidth: 1,
                    formatter: function (obj) {
                        var value = obj.value;
                        return schema[3].text + '：' + value[3] + '<br>'
                            + schema[1].text + '：' + value[1] + schema[1].unit + '<br>'
                            + schema[0].text + '：' + value[0] + schema[0].unit + '<br>'
                            + schema[2].text + '：' + value[2] + '<br>';
                    }
                },
                grid: {
                    left: '12%',
                    right: '110'
                },
                xAxis: {
                    type: 'log',
                    name: '人均收入',
                    max: 100000,
                    min: 300,
                    nameGap: 25,
                    nameLocation: 'middle',
                    nameTextStyle: {
                        fontSize: 18
                    },
                    splitLine: {
                        show: true
                    },
                    axisTick: {
                        lineStyle: {
                            color: '#ccc'
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#ccc'
                        }
                    },
                    axisLabel: {
                        formatter: '{value} $',
                        textStyle: {
                            color: '#ccc'
                        }
                    }
                },
                yAxis: {
                    type: 'value',
                    name: '平均寿命',
                    max: 100,
                    nameTextStyle: { color: '#fff', fontSize: 26},
                    axisLine: {
                        lineStyle: {
                            color: '#ccc'
                        }
                    },
                    axisTick: {
                        lineStyle: {
                            color: '#ccc'
                        }
                    },
                    splitLine: {
                        show: true
                    },
                    axisLabel: {
                        formatter: '{value} 岁',
                        textStyle: {
                            color: '#ccc'
                        }
                    }
                },
                // 颜色对应列
                visualMap: [
                    {
                        show: false,
                        dimension: 3,
                        categories: data.counties,
                        calculable: true,
                        precision: 0.1,
                        textGap: 30,
                        textStyle: {
                            color: '#ccc'
                        },
                        inRange: {
                            color: [ '#5effff', '#047456', '#ff0000','#00ffff', '#009198','#00ffff', '#01ef9e', '#047456', '#047456', '#00ffe2', '#850000','#b03800','#fa8c3c','#ae0000']
                        }
                    }
                ],
                series: [
                    {
                        type: 'scatter',
                        itemStyle: itemStyle,
                        data: data.series[0],
                        symbolSize: function(val) {
                            return sizeFunction(val[2]);
                        },
                    }
                ],
                animationDurationUpdate: 1000,
                animationEasingUpdate: 'quinticInOut'
            },
            options: []
        };

        for (var n = 0; n < data.timeline.length; n++) {
            // 填充 timeline 数据
            option.baseOption.timeline.data.push(data.timeline[n]);  
            
            // 填充markPoint data
            var markPointDatas = [];
            for( var m = 0; m < data.series[n].length; ++m){
                var markPointData = {
                    coord: [data.series[n][m][0], data.series[n][m][1]+3],
                    symbol:'image://img/'+data.series[n][m][3]+'.jpg',
                    symbolSize:[20,12]
                }
                markPointDatas.push(markPointData);
            }          
            // 填充 options 数据
            option.options.push({
                title: {
                    show: true,
                    'text': data.timeline[n] + ''
                },
                series: {
                    name: data.timeline[n],
                    type: 'scatter',
                    itemStyle: itemStyle,
                    data: data.series[n],
                    symbol:'circle',
                    symbolSize: function(val) {
                        return sizeFunction(val[2]);
                    },
                   
                    markPoint : {
                        itemStyle : {
                            normal : {
                                label : {
                                    show : false
                                }
                            }
                        },
                        data : markPointDatas
                    }
            
                }
            });
        }

        myChart.setOption(option);

    });
})();